﻿
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <title>我的报表</title>
    <link rel="stylesheet" type="text/css" href="../plugins/weui/css/weui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/css.css">
    <link rel="stylesheet" type="text/css" href="../css/boss_rader.css"/>
</head>
<body>
    <div class="container">

        <div class="content" style="padding-top:10px;">
            <div class="weui-flex taps tap1" id='1'>
                <div class="weui-flex__item"><div id="d1" class="placeholder actived_item active_item">汇总</div></div>
                <div class="weui-flex__item"><div id="d2" class="placeholder actived_item">昨日</div></div>
                <div class="weui-flex__item"><div id="d3" class="placeholder actived_item">近7天</div></div>
                <div class="weui-flex__item"><div id="d4" class="placeholder actived_item">近30天</div></div>
            </div>
            <div class="weui-flex count_box f15">
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="total_count">
                            <div class="count">客户总数</div>
                            <div class="count_title f20" id="clientCount">加载中</div>
                            <!-- <div class="count_title">无对比</div> -->
                        </div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">跟进总数</div>
                        <div class="count_title f20" id="followUp">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">浏览总数</div>
                        <div class="count_title f20" id="browse">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
            </div>
            <div class="weui-flex count_box f15">
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被转发总数</div>
                        <div class="count_title f20" id="shareTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被保存总数</div>
                        <div class="count_title f20" id="saveTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder item_count">
                        <div class="count">被点赞总数</div>
                        <div class="count_title f20" id="likeTotal">加载中</div>
                        <!-- <div class="count_title">无对比</div> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="rate">
            <div class="rate_title f18">30天内成交率漏斗</div>
            <div class="mask_box">
                <div class="mask mask_item1">
                    <span class="rate_count" id="rate_count1"></span>
                    <!-- <div class="down">
                        <span>-24</span>
                        <img src="../images/boss/16.png">
                    </div> -->
                </div>
                <div class="mask mask_item2">
                    <span class="rate_count" id="rate_count2"></span>
                    <!-- <div class="down up_item2">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
                <div class="mask mask_item3">
                    <span class="rate_count" id="rate_count3"></span>
                    <!-- <div class="down up_item3">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
                <div class="mask_footer">
                    <div class="mask_item4">
                        <span id="rate_count4"></span>
                    </div>
                    <!-- <div class="up_item4">
                        <span>-24</span>
                        <img src="../images/boss/17.png">
                    </div> -->
                </div>
            </div>
            <div class="weui-flex rate_point">
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c1"></span>
                        <span id="circular1"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c2"></span>
                        <span id="circular2"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c3"></span>
                        <span id="circular3"></span>
                    </div>
                </div>
                <div class="weui-flex__item point_item">
                    <div class="placeholder item_p">
                        <span class="circular c4"></span>
                        <span id="circular4"></span>
                    </div>
                </div>
            </div>
        </div>

        <div class="customer">

            <div class="weui-flex customer-check">
                <div class="weui-flex__item">
                    <div class="placeholder " style="text-align:center;">客户兴趣占比</div>
                </div>
            </div>
            <div class="pie" id="container" style="width:200px;;height:200px;margin-left: auto;margin-right: auto;">
            </div>
            <div class="weui-flex" style=";padding-top:0px;">
                <div class="weui-flex__item">
                    <div class="placeholder placeholder-other">
                        <div class="dian" style="background-color: #ff5f1b;">
                        </div>
                        <div class="" style="color:#ff5f1b;font-size: 12px;">
                            对我感兴趣
                        </div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder placeholder-other">
                        <div class="dian" style="background-color: #ffab2c;">
                        </div>
                        <div class="" style="color:#ffab2c;font-size: 12px;">
                            对产品感兴趣
                        </div>
                    </div>
                </div>
                <div class="weui-flex__item">
                    <div class="placeholder placeholder-other">
                        <div class="dian" style="background-color:#3fc3d2;">
                        </div>
                        <div class="" style="color:#3fc3d2;font-size: 12px;">
                            对公司感兴趣
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="customer">
            <div class="weui-flex customer-check" style="border-top:20px solid #fff;">
                <div class="weui-flex__item">
                    <div class="placeholder-other">近15日客户活跃度</div>
                </div>
            </div>
            <div id="main3" style="width:300px;height:300px;margin-left: auto;margin-right: auto;"></div>
        </div>

        <div class="customer">
            <div class="weui-flex customer-check" style="border-top:20px solid #fff;">
                <div class="weui-flex__item">
                    <div class="placeholder-other">客户与我的互动</div>
                </div>
            </div>
            <div id="main4" style="width: 300px;height:300px;margin-left: auto;margin-right: auto;"></div>
        </div>

    </div>
</body>
<script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../plugins/echarts/js/echarts.min.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<script src="../js/clientchart.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container"); //饼图对象
    $(function () {
        getTotalByDate();
        loadProbability();
        loadMyReport();

        //标签切换
        $(".weui-flex").on("click", function (e) {
            var currid = e.currentTarget.id;
            var id = e.target.id;
            if (id != 1 && id != 2 && id != 3 && id != 4 && id != "") {
                $(".tap" + currid + " .actived_item").removeClass("active_item")
                $("#" + id).addClass("active_item");
            }
            if (id == "n1" || id == "n2" || id == "n3") {
                clientDateList = [];  //日期轴数据
                clientTotalList = []; //值数据
            }
            if (id == "n4" || id == "n5" || id == "n6") {
                getImByDate = [];  //日期轴数据
                getImByvalue = []; //值数据
            }
            if (id == "n7" || id == "n8" || id == "n9") {
                followByDate = [];
                followByvalue = []
            }
            switch (id) {
                case "n1": loadClientData(7); break;
                case "n2": loadClientData(15); break;
                case "n3": loadClientData(30); break;
                case "n4": loadgetImByData(7); break;
                case "n5": loadgetImByData(15); break;
                case "n6": loadgetImByData(30); break;
                case "n7": loadFollowByData(7); break;
                case "n8": loadFollowByData(15); break;
                case "n9": loadFollowByData(30); break;
                case "d1": getTotalByDate(); break;
                case "d2": getTotalByDate(1); break;
                case "d3": getTotalByDate(7); break;
                case "d4": getTotalByDate(30); break;
            }
        })

    })

    //加载成交率漏斗
    function loadProbability() {
        var days = 30;  //天数
        ajaxGet(siteApiList.GetTotalProbability + "?staffid=" + staffId + "&days=" + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            //绑定图表
            var values = data.Data.value;
            var column = data.Data.column;
            if (values.length > 0) {
                $("#rate_count1").text(values[0]);
                $("#rate_count2").text(values[1]);
                $("#rate_count3").text(values[2]);
                $("#rate_count4").text(values[3]);
            }
            if (column.length > 0) {
                $("#circular1").text(column[0]);
                $("#circular2").text(column[1]);
                $("#circular3").text(column[2]);
                $("#circular4").text(column[3]);
            }
        })
    }

    //加载 客户占比、15天活跃度、互动数据
    function loadMyReport() {
        ajaxGet(siteApiList.MyReport + "?staffid=" + staffId, function (data) {
            if (!isJsonSuccess(data))
                return;
            if (data.Data == null) return;

            var xData3 = getDateArray(-15);
            var yData3 = getYData(data.Data.DateRecord, xData3);
            loadChart1(data.Data.ActionRecord);
            loadChart3(xData3, yData3);
            loadChart4(data.Data.ActionRecord);
        })
    }

    /*
   * 汇总统计
   * 转发总数 = 13转发动态
   * 保存总数 = 7保存电话
   * 浏览总数 = 0查看商品 + 1查看官网 + 4查看名片 + 5查看动态
   * 点赞总数 = 10名片标签点赞 +  11个性签名点赞
   */
    function getTotalByDate(days) {
        if (days)
            days = "&days=" + days;
        else
            days = "";

        ajaxGet(siteConfig.apiDomain + "/addressbook/GetTotalByDate" + "?staffid=" + staffId + days, function (data) {
            if (!isJsonSuccess(data))
                return;
            //客户总数 , 跟进总数, 浏览总数, 转发总数, 保存总数, 点赞总数
            var clientCount = 0, followUp = 0, browse = 0, shareTotal = 0, saveTotal = 0, likeTotal = 0;
            if (data.Code == 0) {
                var list = data.Data.ActionTotalList;
                var clientCount = data.Data.ClientCount;
                for (let i = 0; i < list.length; i++) {
                    //跟进
                    if (list[i].ActionType == 15) {
                        followUp = list[i].Total;
                    }
                    //浏览
                    if (list[i].ActionType == 0 || list[i].ActionType == 1 || list[i].ActionType == 4 || list[i].ActionType == 5) {
                        browse += list[i].Total
                    }
                    //转发总数
                    if (list[i].ActionType == 13) {
                        shareTotal = list[i].Total;
                    }
                    //保存总数
                    if (list[i].ActionType == 7) {
                        saveTotal = list[i].Total;
                    }
                    //点赞总数
                    if (list[i].ActionType == 10 || list[i].ActionType == 11) {
                        likeTotal += list[i].Total;
                    }
                }
                $("#clientCount").text(clientCount);
                $("#followUp").text(followUp);
                $("#browse").text(browse);
                $("#shareTotal").text(shareTotal);
                $("#saveTotal").text(saveTotal);
                $("#likeTotal").text(likeTotal);
            }
        })
    }

</script>
</html>